<template>
  <div class="home">
    <!-- 背景图励志 -->
    <div class="bg-img">
      <!-- 遮罩-特效 -->
      <div class="mask">
        <div class="characters">
          <div class="level1 wow fadeInDown">像星空一样闪耀 像宇宙一样浩瀚</div>
          <div class="level2 wow fadeInDown">哪怕只是一颗星星也要发出自身的光芒</div>
          <div class="btn wow fadeInUp" @click="lightStarry">点亮星空</div>
        </div>
      </div>
      <!-- 星空 -->
      <div class="starry" v-show="lightStar" ref="starry"></div>
    </div>
    <!-- 关于我 -->
    <div class="about-me">
      <div class="title wow fadeInDown">About Me</div>
      <div class="about-me-inner">
        <div class="bgm wow fadeInUp"></div>
        <div class="detail wow fadeInUp">
          <p>我叫王非凡</p>
          <br>
          <p>这个网址是我的主页</p>
          <br>
          <p>对前端有着浓厚的兴趣</p>
          <br>
          <p>平时喜欢唱、跳、rap、台球</p>
          <br>
          <p>有兴趣大家一起交流交流</p>
        </div>
      </div>
    </div>
    <!-- 粒子特效 /我的简历-->
    <div class="particles">
      <Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesConfig" />
      <div class="resume">
        <div class="resume-btn wow fadeInDown" @click="openResume">我的简历</div>
      </div>
    </div>
    <!-- 我会什么 -->
    <div class="ican">
      <div class="title wow fadeInDown">My Skills</div>
      <div class="inner">
        <div class="ican-item wow fadeInUp" @click="popUpSkillsShow(item)" v-for="(item, index) in icanImgs" :key="index">
          <img v-lazy="item.url" alt="">
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <!-- 我会什么弹出框 -->
    <van-popup v-model:show="mySkillsShow" @close="skillRate = '0'" round :style="{ padding: '66px' }">
      <div class="skillPop">
        <van-circle v-model:current-rate="currentRate" layer-color="#ebedf0" :color="skillColor" :rate="skillRate"
          :speed="100" :stroke-width="60" :text="skillText" />
        <div class="skilldesc">{{ skillDesc }}</div>
      </div>
    </van-popup>
    <!-- 我的作品 -->
    <div class="workers">
      <div class="title wow fadeInDown">My Works</div>
      <div class="workers-wrap">
        <div class="item wow fadeInUp" @click="openWorkers(item)" v-for="(item, index) in myWorkers" :key="index">
          <img v-lazy="item.url" alt="">
          <div class="detail">
            <div class="work-title">{{ item.title }}</div>
            <div class="describe">{{ item.describe }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="hobby">
      <div class="inner">
        <div class="hobby-item wow fadeInDown" v-for="(item, index) in othersArr" :key="index">
          <img v-lazy="item.url" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { loadFull } from "tsparticles";
import particlesConfig from "@/assets/particles";
import WOW from "wow.js";
const router = useRouter();
const particlesInit = async (engine: any) => {
  await loadFull(engine);
};

// 页面挂载
onMounted(() => {
  // 初始化wowjs
  new WOW({
    offset: 100
  }).init();
  handleLoading();
});
// 处理首屏加载
const handleLoading = () => {
  const image = new Image();
  image.src = new URL("@/assets/bgm.png", import.meta.url).href;
  const loading = document.getElementById("loading-div");
  const hideLoading = () => {
    let timer = setTimeout(() => {
      if (loading) {
        loading.style.display = "none";
        clearTimeout(timer);
      }
    }, 2000);
  }
  image.onload = () => {
    hideLoading();
  }
  image.onerror = () => {
    hideLoading();
  }
}

// 星空是否闪烁
const lightStar = ref(false);
// 星空闪烁
function lightStarry() {
  lightStar.value = true;
}
// 打开简历
function openResume() {
  router.push("/blog/myResume");
}

// 我会做什么列表
const icanImgs = [
  {
    url: new URL("@/assets/ican-icons/html.png", import.meta.url).href,
    title: "HTML",
    rate: "85",
    skillText: "游刃有余",
    skillColor: "#FA480B",
    skillDesc: "熟练掌握各种标签使用，对语义化开发有一定掌握"
  },
  {
    url: new URL("@/assets/ican-icons/css.png", import.meta.url).href,
    title: "CSS",
    rate: "85",
    skillText: "得心应手",
    skillColor: "#2094EF",
    skillDesc: "熟练掌握flex布局、伪元素、样式美化"
  },
  {
    url: new URL("@/assets/ican-icons/JavaScript.png", import.meta.url).href,
    title: "JavaScript",
    rate: "85",
    skillText: "驾轻就熟",
    skillColor: "#F4DC1E",
    skillDesc: "熟练掌握es6及其之后语法，熟悉各种数组对象的方法"
  },
  {
    url: new URL("@/assets/ican-icons/Vue.png", import.meta.url).href,
    title: "Vue",
    rate: "85",
    skillText: "挥洒自如",
    skillColor: "#3CA978",
    skillDesc: "熟练掌握vue2、vue3全家桶的使用"
  },
  {
    url: new URL("@/assets/ican-icons/element+.png", import.meta.url).href,
    title: "Element+",
    rate: "85",
    skillText: "行云流水",
    skillColor: "#327BC7",
    skillDesc: "熟练掌握PC端element+各种组件的使用"
  },
  {
    url: new URL("@/assets/ican-icons/vant.png", import.meta.url).href,
    title: "Vant",
    rate: "85",
    skillText: "不假思索",
    skillColor: "#36D7B7",
    skillDesc: "熟练掌握移动端vant各种组件的使用"
  },
  {
    url: new URL("@/assets/ican-icons/pinia.png", import.meta.url).href,
    title: "Pinia",
    rate: "70",
    skillText: "良好",
    skillColor: "#EBC249",
    skillDesc: "良好掌握vue推荐存储库pinia的使用"
  },
  {
    url: new URL("@/assets/ican-icons/React.png", import.meta.url).href,
    title: "React",
    rate: "70",
    skillText: "良好",
    skillColor: "#61DAFB",
    skillDesc: "良好掌握react16及之后的使用，熟悉函数式组件的使用"
  },
  {
    url: new URL("@/assets/ican-icons/typescript.png", import.meta.url).href,
    title: "TypeScript",
    rate: "70",
    skillText: "良好",
    skillColor: "#0288D1",
    skillDesc: "良好掌握ts强类型开发，合理使用接口、类型、泛型"
  },
  {
    url: new URL("@/assets/ican-icons/scss.png", import.meta.url).href,
    title: "Scss",
    rate: "70",
    skillText: "良好",
    skillColor: "#FF83C4",
    skillDesc: "良好掌握scss，对于嵌套、混入、继承有一定了解"
  },
  {
    url: new URL("@/assets/ican-icons/echarts.png", import.meta.url).href,
    title: "ECharts",
    rate: "70",
    skillText: "良好",
    skillColor: "#E43961",
    skillDesc: "良好掌握echarts多种图标的用法和样式定制"
  },
  {
    url: new URL("@/assets/ican-icons/miniProgram.png", import.meta.url).href,
    title: "XCX",
    rate: "70",
    skillText: "良好",
    skillColor: "#009D38",
    skillDesc: "良好掌握微信小程序原生开发，对原生组件有一定掌握"
  },
  {
    url: new URL("@/assets/ican-icons/git.png", import.meta.url).href,
    title: "Git",
    rate: "70",
    skillText: "良好",
    skillColor: "#E64A19",
    skillDesc: "良好掌握git各种操作，更好配合多人协作"
  },
  {
    url: new URL("@/assets/ican-icons/node.png", import.meta.url).href,
    title: "Node",
    rate: "55",
    skillText: "了解",
    skillColor: "#679E62",
    skillDesc: "了解node.js的使用，可使用express框架搭建简单的服务器"
  },
  {
    url: new URL("@/assets/ican-icons/webpack.png", import.meta.url).href,
    title: "Webpack",
    rate: "55",
    skillText: "了解",
    skillColor: "#1C78C0",
    skillDesc: "了解webpack的一些配置，开发生产做出区分"
  },
  {
    url: new URL("@/assets/ican-icons/vite.png", import.meta.url).href,
    title: "Vite",
    rate: "55",
    skillText: "了解",
    skillColor: "#9D5CFE",
    skillDesc: "了解vite的一些简单配置，开发生产做出区分"
  },
  {
    url: new URL("@/assets/ican-icons/prettier.png", import.meta.url).href,
    title: "Prettier",
    rate: "55",
    skillText: "了解",
    skillColor: "#C999C9",
    skillDesc: "了解prettier的部分配置，让代码的格式更加美观"
  },
  {
    url: new URL("@/assets/ican-icons/web.png", import.meta.url).href,
    title: "Web前端",
    rate: "100",
    skillText: "不断学习",
    skillColor: "#58C5C2",
    skillDesc: "在前端的道路上不断发展，不断学习，不断进步"
  },
];
// 点击我会什么
const popUpSkillsShow = (item: { rate: string; skillText: string; skillColor: string; skillDesc: string }) => {
  skillRate.value = item.rate;
  skillColor.value = item.skillColor;
  skillText.value = item.skillText;
  skillDesc.value = item.skillDesc;
  mySkillsShow.value = true;
}
// 当前进度
const currentRate = ref(0);
// 技能进度
const skillRate = ref("0");
// 技能熟练程度
const skillText = ref("");
// 进度条颜色
const skillColor = ref("");
// 技能描述
const skillDesc = ref("");
const mySkillsShow = ref(false);

// 我的作品
const myWorkers = [
  {
    url: new URL("@/assets/works/lantern.png", import.meta.url).href,
    title: "灯笼",
    describe: "纯HTML与CSS绘画的灯笼",
    href: "https://wangff.love/lantern/"
  },
  {
    url: new URL("@/assets/works/car.png", import.meta.url).href,
    title: "管理系统",
    describe: "毕业设计 汽车销售管理系统",
    href: ""
  },
  {
    url: new URL("@/assets/works/blog.png", import.meta.url).href,
    title: "我的主页",
    describe: "使用一系列动画库构建的主页",
    href: "https://gitee.com/to-ling/resume.git"
  },
  {
    url: new URL("@/assets/works/system.png", import.meta.url).href,
    title: "模板",
    describe: "基于vue3和ts的开发的管理系统架子",
    href: "https://wangff.love/architecture/"
  },
];

// 点击我的作品
const openWorkers = (item: { href: string }) => {
  if (item.href) {
    window.open(item.href);
  }
}

// 其他技能
const othersArr = [
  {
    url: new URL("@/assets/others/mongodb.png", import.meta.url).href
  },
  {
    url: new URL("@/assets/others/mysql.png", import.meta.url).href
  },
  {
    url: new URL("@/assets/others/ps.png", import.meta.url).href
  },
  {
    url: new URL("@/assets/others/pr.png", import.meta.url).href
  }
];
</script>

<style scoped lang="scss">
.home {
  .bg-img {
    height: 600px;
    background-image: url(../assets/bgm.png);
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: white;

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent, rgba(0, 0, 0, 0.5));
      background-color: rgba(1, 41, 71, 0.6);
      color: white;
      z-index: 2;

      .characters {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        .level1 {
          font-size: 50px;
        }

        .level2 {
          font-size: 20px;
          margin: 10px 0 50px 0;
        }

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 50px;
          border: 2px solid white;
          border-radius: 4px;
          cursor: pointer;
          transition: .3s;
          font-size: 20px;

          &:hover {
            background-color: rgba(255, 255, 255, 0.9);
            color: rgba(0, 0, 0, 0.9);
          }
        }
      }
    }

    // 星空
    .starry {
      position: absolute;
      background-image: url(../assets/starry.png);
      background-size: cover;
      background-position: center;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      opacity: 0;
      animation: lightStarry 3s infinite;
    }

    @keyframes lightStarry {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }
  }

  .about-me {
    background-color: white;
    padding: 50px 0;

    .title {
      color: var(--text-color);
      font-size: 30px;
      text-align: center;
      margin-bottom: 30px;
    }

    .about-me-inner {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 40px;

      .bgm {
        background-image: url(../assets/aboutme.png);
        background-repeat: no-repeat;
        height: 250px;
        background-size: contain;
        display: block;
      }

      .detail {
        text-align: center;
        font-size: 20px;
        color: #666666;
      }
    }
  }

  .ican {
    padding: 50px 0;
    background-color: white;

    .title {
      color: var(--text-color);
      font-size: 30px;
      text-align: center;
      margin-bottom: 30px;
    }

    .inner {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-content: space-between;
      gap: 50px 50px;

      .ican-item {
        height: 175px;
        border: 1px solid #edf4ff;
        cursor: pointer;
        transition: .2s;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        position: relative;
        overflow: hidden;

        &:hover {
          box-shadow: 0 0 20px 0 rgba(157, 160, 162, 0.16);
        }

        img {
          width: 40%;
        }

        .title {
          font-size: 20px;
          color: var(--text-color);
        }
      }
    }
  }

  .skillPop {
    display: flex;
    flex-direction: column;
    align-items: center;

    .skilldesc {
      margin-top: 20px;
    }
  }

  .workers {
    background-color: #f9f9f9;
    padding: 50px 0;

    .title {
      color: var(--text-color);
      font-size: 30px;
      text-align: center;
      margin-bottom: 30px;
    }

    .workers-wrap {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, auto);
      justify-content: space-between;
      gap: 10px;

      .item {
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        border: 1px solid #f0f0f0;
        background-color: white;
        color: var(--text-color);
        transition: .3s;
        cursor: pointer;

        &:hover {
          transform: translateY(-10px);
        }

        img {
          width: 100%;
        }

        .detail {
          padding: 5px;

          .work-title {
            font-size: 18px;
          }

          .describe {
            color: #666666;
            font-size: 14px;
          }
        }
      }
    }
  }

  .particles {
    height: 360px;
    overflow: hidden;
    position: relative;
    background-color: #fcfcfc;

    #tsparticles {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: 0;
    }

    .resume {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;

      .resume-btn {
        height: 60px;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        backdrop-filter: blur(2px);
        border: 3px solid rgba(0, 0, 0, 0.5);
        color: var(--text-color);
        font-size: 20px;
        transition: .2s;

        &:hover {
          background-color: rgba(0, 0, 0, 0.5);
          border: 2px solid transparent;
          color: white;
        }
      }
    }
  }

  .hobby {
    background-color: white;
    padding: 50px 0;

    .inner {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, auto);
      justify-content: space-between;
      position: relative;

      .hobby-item {
        position: relative;

        img {
          width: 50px;
        }
      }
    }
  }

}

@media (max-width:640px) {
  .home {
    .about-me .about-me-inner {
      grid-template-columns: 1fr;

      .bgm {
        display: none;
      }
    }

    .ican .inner {
      grid-template-columns: repeat(2, 1fr);
    }

    .workers .workers-wrap {
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
    }
  }
}
</style>